<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/templates/mantenimiento.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:r="http://richfaces.org">

    <ui:define name="title">
        ASIGNACIÓN DE HORARIOS
    </ui:define>    
    <ui:define name="datos">
        <center>
            <h:panelGrid id="panelDatos">

                <h:form id="formDatos">
                    <p:focus for="ruc" id="foco" />
                    <p:panel header="TIPO" >
                        <h:panelGrid columns="4">
                            <p:selectOneRadio id="options" value="#{jsfHorario.tipoHorario}">  
                                <f:selectItem itemLabel="Horarios individuales" itemValue="1" /> 
                                <f:selectItem itemLabel="Porcentaje general" itemValue="2" />  
                                <f:ajax execute="options" render="panDat panelBotones commonStatus"/>
                            </p:selectOneRadio>  
                        </h:panelGrid>
                    </p:panel>

                    <h:panelGrid id="panDat" columnClasses="alignTop,alignTop"  columns="2" >

                        <p:panel rendered="#{jsfHorario.tipoHorario eq 2}" header="Horarios indivuduales"  >
                            <h:panelGrid   columns="4" >
                                <h:graphicImage library="images/ajax" name="bullet.gif" />
                                <h:outputLabel  value="Porcentaje para médicos" />
                                <p:spinner stepFactor="5"  id="porcGen" min="0" max="100" rendered="true" value="#{jsfHorario.porcentajeGen}" />
                                <p:message for="porcGen" />
                            </h:panelGrid> 
                        </p:panel>

                        <h:panelGrid rendered="#{jsfHorario.tipoHorario eq 1}" columnClasses="alignTop,alignTop"  columns="2" >
                            <h:panelGrid>
                                <p:panel  header="HORARIOS INDIVIDUALES"  >
                                    <h:panelGrid id="medico"   columns="4" >
                                        <h:graphicImage library="images/ajax" name="bullet.gif" />
                                        <h:outputLabel  value="Nombres:" />
                                        <p:autoComplete placeholder="Ingrese nombre del médico"  size="30" required="true"  converter="JsfConverterMedicoAutocompletado" completeMethod="#{jsfMedico.medicoAutocompleteAction}" 
                                                        itemLabel="#{var.ameNombreFull}" itemValue="#{var}" forceSelection="true"  id="ruc" value="#{jsfEspecialidadMedico.object.admMedico}" var="var" >
                                            <p:ajax update="cedula nombre direccion telefono subespecialidad tipoConsulta"  listener="#{jsfHorario.asignarMedico(jsfEspecialidadMedico.object.admMedico.ameId)}"  event="itemSelect"/>
                                        </p:autoComplete>
                                        <f:verbatim/>
                                        <f:verbatim/>
                                        <f:verbatim/>
                                        <p:message for="ruc" />
                                        <f:verbatim/>

                                        <h:graphicImage library="images/ajax" name="bullet.gif" />
                                        <h:outputText value="Tipo Consulta:" />
                                        <p:selectOneMenu style="width: 205px" label="Tipo de consulta" id="tipoConsulta" required="true"  converter="JsfConverterTipoConsulta" value="#{jsfHorario.admTipoConsulta}" >                              
                                            <f:selectItem itemLabel="Seleccione ..."/>
                                            <f:selectItems value="#{jsfTipoConsulta.selectedItem}" />
                                            <f:ajax render="subespecialidad " execute="@this" listener="#{jsfHorario.inicializarEspecialidad()}"  event="change" />
                                        </p:selectOneMenu>
                                        <f:verbatim />


                                        <h:graphicImage library="images/ajax" name="bullet.gif" />
                                        <h:outputText value="Subespecialidades:" />
                                        <p:selectOneMenu style="width: 205px" label="Subespecialidades" id="subespecialidad" required="true"  converter="JsfConverterEspecialidadMedico" value="#{jsfHorario.especialidad}" >                              
                                            <f:selectItem itemLabel="Seleccione ..."/>
                                            <f:selectItems value="#{jsfHorario.selectedItemSubespecialidades}" />
                                            <f:ajax execute="subespecialidad tipoConsulta" event="change" listener="#{jsfHorario.cargarListaHorario()}" 
                                                    render="medico panelBotones pnlLista panelListaPop listaSimpleFechas"/>
                                        </p:selectOneMenu>
                                        <f:verbatim />


                                        <f:verbatim />
                                        <f:verbatim />
                                        <p:message for="subespecialidad" />
                                        <f:verbatim />



                                        <f:verbatim />
                                        <h:outputLabel  value="Cédula:" />
                                        <h:outputLabel styleClass="letraTomate" id="cedula" value="#{jsfEspecialidadMedico.object.admMedico.ameCedula}"  />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />

                                        <f:verbatim />
                                        <h:outputLabel  value="Nombre:" />
                                        <h:outputLabel styleClass="letraTomate" id="nombre" value="#{jsfEspecialidadMedico.object.admMedico.ameNombreFull}"  />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />



                                        <f:verbatim />
                                        <h:outputLabel  value="Dirección:" />
                                        <h:outputLabel styleClass="letraTomate" id="direccion" value="#{jsfEspecialidadMedico.object.admMedico.ameDireccion}"  />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />

                                        <f:verbatim />
                                        <h:outputLabel  value="Telefono" />
                                        <h:outputLabel styleClass="letraTomate" id="telefono" value="#{jsfEspecialidadMedico.object.admMedico.ameTelefonoConv}"  />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />



                                        <f:verbatim />
                                        <f:verbatim />
                                        <p:commandButton id="btAgregar" rendered="#{not empty jsfEspecialidadMedico.object.admMedico.ameId}" onclick="PF('dlg2').show();" 
                                                         update="panelListaPop" disabled="#{jsfHorario.isBtnActivo eq false}" process="@this" action="#{jsfHorario.cargarNuevoHorario()}" value="Agregar horario"   title="Agregar horario">
                                        </p:commandButton>
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />
                                        <f:verbatim />





                                    </h:panelGrid>

                                </p:panel>
                                <p:panel style="width: 400px" >
                                    <p:dataTable id="listaSimpleFechas" emptyMessage="No tiene horarios"  value="#{jsfHorario.listaHorario}" var="hor"  >
                                        <f:facet name="header">
                                            <center>
                                                <h:outputText  value="Lista fechas"/>
                                            </center>
                                        </f:facet>
                                        <p:column headerText="Horario"  >
                                            <h:outputText  value="Horario Nº #{hor.choOrden}"/>
                                        </p:column>
                                        <p:column headerText="Fecha inicio"  >
                                            <p:calendar placeholder="dd-mm-yyyy" size="10"  
                                                        id="ingresoAm" label="Hora ingreso" navigator="true" value="#{hor.choFechaInicio}" 
                                                        pattern="dd-MM-yyyy"  /> 
                                            <p:message for="ingresoAm" />
                                        </p:column>
                                        <p:column headerText="Fecha fin"  >
                                            <p:calendar placeholder="dd-mm-yyyy" size="10" navigator="true" id="salidaAm" label="Hora ingreso" value="#{hor.choFechaFin}" 
                                                        pattern="dd-MM-yyyy"  /> 
                                            <p:message for="ingresoAm" />
                                        </p:column>
                                    </p:dataTable>
                                </p:panel>
                            </h:panelGrid>

                            <h:panelGrid id="pnlLista"   >
                                <p:dataTable id="listaSimple" emptyMessage="No tiene horarios"  value="#{jsfHorario.listaHorario}" var="var"  >
                                    <f:facet name="header">
                                        <center>
                                            <h:outputText  value="Porcentaje para médico : " />
                                            <p:spinner stepFactor="10"  id="porc" min="0" max="100" rendered="true" value="#{jsfHorario.porcentajeAgenda}" />
                                            <h:outputText  value=" % "/>
                                        </center>
                                    </f:facet>
                                    <p:subTable  value="#{var.cexHorariosDiaList}" var="item"  > 
                                        <f:facet name="header">
                                            <center>

                                                <h:outputText  value="Fecha inicio: " />
                                                <h:outputText value="#{var.choFechaInicio}">
                                                    <f:convertDateTime pattern="yyyy-MM-dd"/>
                                                </h:outputText>
                                                
                                                 <p:spacer width="50" height="10" />

                                                <h:outputText  value="Fecha fin " />
                                                <h:outputText value="#{var.choFechaFin}" >
                                                    <f:convertDateTime pattern="yyyy-MM-dd"/>
                                                </h:outputText>

                                            </center>
                                        </f:facet>
                                        <p:columnGroup type="header">
                                            <p:row>
                                                <center>
                                                    <p:column  headerText="Día semana" />
                                                    <p:column  headerText="Hora inicio" />
                                                    <p:column  headerText="Hora fin" />
                                                    <p:column  headerText="Consultas" />
                                                    <p:column  headerText="Intervalo" />
                                                    <p:column   headerText="Horario" />
                                                </center>
                                            </p:row>
                                        </p:columnGroup>
                                        <p:column  >
                                            <center>
                                                <h:outputText  id="nom"   value="#{item.cexDia.cdiNombre}"  />
                                            </center>
                                        </p:column>
                                        <p:column  >
                                            <center>
                                                <p:calendar minHour="07" maxMinute="59"  minMinute="0"  placeholder="00:00"  maxHour="18"  size="6" id="ingresoAm" label="Hora ingreso" value="#{item.chdHoraInicioAm}" pattern="HH:mm" timeOnly="true" /> 
                                                <p:message for="ingresoAm" />
                                            </center>
                                        </p:column>
                                        <p:column >
                                            <center>
                                                <p:calendar minHour="07" maxMinute="59"  minMinute="0"  placeholder="00:00"  maxHour="18" id="salidaAm"  
                                                            label="Hora salida" size="6" value="#{item.chdHoraFinAm}" pattern="HH:mm" timeOnly="true" /> 
                                                <p:message for="salidaAm" />
                                            </center>
                                        </p:column>
                                        <p:column  >
                                            <center>
                                                <p:spinner label="Consultas" min="1" max="150" id="consulta" size="3"  value="#{item.chdNumConsultas}"/> 
                                                <p:message for="consulta" />
                                            </center>
                                        </p:column>

                                        <p:column   >
                                            <center>
                                                <p:spinner max="20" min="1" label="Intervalo" id="intervalo" size="3"  value="#{item.chdIntervalo}">

                                                </p:spinner> 
                                                <p:message for="intervalo" />
                                            </center>
                                        </p:column>
                                        <p:column  >
                                            <center>
                                                <h:outputLabel value="#{item.cexHorario.choOrden}">

                                                </h:outputLabel>
                                            </center>
                                        </p:column>
                                    </p:subTable>
                                </p:dataTable>
                            </h:panelGrid>




                        </h:panelGrid>


                    </h:panelGrid>

                    <center>
                        <h:panelGrid columns="2" >
                            <h:panelGroup id="panelBotones">
                                <p:commandButton id="btGrabar" process="@form" disabled="#{(empty jsfHorario.listaHorario and jsfHorario.tipoHorario eq 1) and jsfHorario.isBtnGrabar eq false}" 
                                                 update=":panelDatos" value="Grabar" action="#{jsfHorario.grabarAction()}"  title="Grabar registro"/>
                                <p:commandButton id="btNuevo" process="@none" update="@form" value="Nuevo" action="#{jsfHorario.nuevoAction}"  title="Limpiar o crear nuevo registro">
                                </p:commandButton>         
                            </h:panelGroup>
                            <p:ajaxStatus id="commonStatus">
                                <f:facet name="start">
                                    <h:graphicImage library="images/ajax" name="status2.gif"/>
                                </f:facet>
                            </p:ajaxStatus>
                        </h:panelGrid>

                        <p:message id="msg" for="formDatos"  >
                            <f:facet name="errorMarker">
                                <h:graphicImage library="images/ajax" name="warning.gif"/>
                            </f:facet>
                            <f:facet name="infoMarker">
                                <h:graphicImage library="images/ajax" name="passed.gif"/>
                            </f:facet>
                        </p:message>

                        <br />
                        <h:panelGroup >
                            <h:graphicImage library="images/ajax" name="bullet.gif" />
                            <h:outputText value="Campo obligatorio" styleClass="campo-obligatorio"/>
                        </h:panelGroup>
                    </center>
                    <div class="separador" />
                    <hr width="100%" />
                    <p /> 
                    <p:growl id="growl"  showDetail="true" life="6500" />  


                    <p:dialog width="580"  header="Nuevo Horario" widgetVar="dlg2" modal="true" height="350">
                        <h:panelGrid id="panelListaPop" >
                            <p:dataTable id="listaSimplePopPup" value="#{jsfHorario.listaHorarioDiaPop}" var="item"  >
                                <f:facet name="header">

                                    <h:outputText  value="Porcentaje para médico : " />
                                    <p:spinner stepFactor="10" size="5" id="porc" min="0" max="100" rendered="true" 
                                               value="#{jsfHorario.cexHorario.choPorcentajeAgenda}" />
                                    <h:outputText  value=" %" />
                                    
                                    

                                    <h:outputText  value="Fecha inicio: " />
                                    <p:calendar size="5" value="#{jsfHorario.cexHorario.choFechaInicio}" pattern="dd-mm-yyyy" placeholder="dd-mm-yyyy" label="Fecha inicio" id="fechaInicio">
                                    </p:calendar> 


                                    <h:outputText  value="Fecha inicio: " />
                                    <p:calendar size="5" value="#{jsfHorario.cexHorario.choFechaFin}" pattern="dd-mm-yyyy" placeholder="dd-mm-yyyy" label="Fecha fin" id="fechaFin">
                                    </p:calendar> 


                                </f:facet>
                                <p:column  headerText="Día" >
                                    <center>
                                        <h:outputText  id="nom"   value="#{item.cexDia.cdiNombre}"  />
                                    </center>
                                </p:column>
                                <p:column headerText="Hora Ingreso" >
                                    <p:calendar minHour="07" maxMinute="59"  minMinute="0" placeholder="00:00" maxHour="18"  size="10" id="ingresoAm"  label="Hora ingreso" value="#{item.chdHoraInicioAm}" pattern="HH:mm" timeOnly="true" >
                                    </p:calendar> 
                                    <p:message for="ingresoAm" />
                                </p:column>
                                <p:column headerText="Hora Salida">
                                    <p:calendar minHour="07" maxMinute="59"  minMinute="0"  placeholder="00:00"  maxHour="18" id="salidaAm"  label="Hora salida" size="10" value="#{item.chdHoraFinAm}" pattern="HH:mm" timeOnly="true" /> 
                                    <p:message for="salidaAm" />
                                </p:column>

                                <p:column headerText="Consultas"  >
                                    <center>
                                        <p:spinner label="Consultas" min="0" max="150" placeholder="0" id="consulta" size="5"  value="#{item.chdNumConsultas}"/> 
                                        <p:message for="consulta" />
                                    </center>
                                </p:column>

                                <p:column headerText="Intervalo"  >
                                    <center>
                                        <p:spinner max="20" min="1" label="Intervalo" placeholder="0" id="intervalo" size="5"  value="#{item.chdIntervalo}">

                                        </p:spinner> 
                                        <p:message for="intervalo" />
                                    </center>
                                </p:column>
                            </p:dataTable>

                            <center>
                                <p:commandButton id="btGrabarNuevo" disabled="#{jsfHorario.isBtnActivo eq false}" 
                                                 process="panelListaPop" 
                                                 update="pnlLista growl panelListaPop panelBotones btAgregar"
                                                 action="#{jsfHorario.agregarHorario()}"  value="Agregar Horario" />
                            </center>
                        </h:panelGrid>
                    </p:dialog>

                   
                </h:form>

            </h:panelGrid>

        </center>

    </ui:define>

</ui:composition>
